<template>
    <div class="box">
        <van-radio-group v-model="checked" checked-color="#ee0a24">
            <div class="card">
                <img class="shanchu" src="@/assets/my/shanchu.png" style="width:18px; height:18px;" alt=""
                    @click="deleteAddress">
                <div class="info">派大星&nbsp;&nbsp;<span class="phone">{{ 12345637890 }}</span></div>
                <div class="address">{{ '山东省济宁市云洲线 文化西路356号太阳都是花园三区' }}</div>
                <van-divider />
                <div style="display:flex; justify-content: space-between;">
                    <van-radio :name="1"><span :style="{ color: checked == name ? '#66d6ff' : '#9A9A9A', }">{{ checked ==
                        name ?
                        '已设默认' : '默认' }}</span></van-radio>
                    <van-button class="btn" plain color="#66d6ff" type="primary">修改</van-button>
                </div>
            </div>
        </van-radio-group>
    </div>
    <div class="bottom">
        <van-button icon="plus" type="primary" color="#66d6ff" style="width:300px;" @click="addAddress">
            添加收货地址
        </van-button>
    </div>
    <van-dialog v-model:show="showDialog" message='确认要删除该地址吗？' show-cancel-button @confirm="confirm" @cancel="cancel">
    </van-dialog>
    <van-popup v-model:show="showCenter" round closeable :style="{ height: '50%', width: '90%' }">
        <div class="tit">添加收货地址</div>
        <van-cell-group inset>
            <van-field v-model="state.a" label="姓名" placeholder="请输入收货人姓名" />
            <van-field v-model="state.b" label="电话" placeholder="请输入收货人手机号" />
            <van-field v-model="state.c" label="地址" placeholder="请输入收货地址" />

        </van-cell-group>
        <div style="display: flex; justify-content: center; margin-top: 20px;">
            <van-button type="primary" color="#66d6ff" style="width:240px; height: 40px;">
                保存
            </van-button>
        </div>
    </van-popup>
</template>

<script setup lang='ts'>
import { showConfirmDialog, showDialog } from 'vant'
const checked = ref(2)
const name = ref(1)
const showDialog = ref(false)
const showCenter = ref(false)
const state = reactive({
    a: '',
    b: '',
    c: ''
})
const deleteAddress = () => {
    showDialog.value = true
}
// 确认删除
const confirm = () => {

}

const cancel = () => {

}
// 添加收货地址
const addAddress = () => {
    showCenter.value = true
}
</script>
<style lang='scss' scoped>
.box {
    padding: 10px;
}

.card {
    width: 100%;
    height: 130px;
    background-color: #fff;
    border-radius: 6px;
    margin-bottom: 12px;
    position: relative;
}

.shanchu {
    position: absolute;
    right: 14px;
    top: 4px;
}

.info {
    padding: 13px 13px 0 13px;
}

.address {
    padding: 13px 13px 0 13px;
    font-size: 14px;
    color: #545454;
    line-height: 20px;
}

.phone {
    color: #545454;
}

.van-divider {
    margin: 10px;
    // padding: 0;
}

.van-radio {
    margin-left: 13px;
}

.btn {
    height: 24px;
    width: 60px;
    font-size: 12px;
    margin-right: 13px;
}

.bottom {
    width: 100%;
    display: flex;
    justify-content: center;
}

.tit {
    width: 100%;
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

::v-deep .van-field__label {
    width: 50px;
}
</style>
